<template>
  <div class="complaint-list" v-loading="loading">
      <div class="input-box">
          <span class="input-title">用户ID</span>
          <el-input
              placeholder="用户ID"
              @keyup.enter.native="getList(1)"
              style="width:120px;"
              clearable
              v-model.trim="paramsList.userId">
          </el-input>
          <span class="input-title" style="margin-left: 20px;">处理状态</span>
          <el-select @change="getList(1)" style="width:120px;" v-model="paramsList.listType">
              <el-option label="未处理" :value="0"></el-option>
              <el-option label="已处理" :value="1"></el-option>
          </el-select>
          <el-button type="primary" class="btn" style="margin-left:20px" @click="getList(1)">查询</el-button>
      </div>
      <div class="table-box">
          <el-table :data="tableData" ref="table" @sort-change="sortChange" border style="width: 100%">
              <el-table-column width="240" prop="toUserId" label="被投诉大神">
                  <template slot-scope="scope">
                      <div class="table-flex">
                          <img class="user-avatar" :src="scope.row.toUserAvatar" alt="">
                          <div class="user-info">
                              <p class="table-btn" @click="goUserDetail(scope.row.toUserId )">趣ID：{{ scope.row.toUserId }}</p>
                              <p>昵称：{{ scope.row.toUserNickname }}</p>
                          </div>
                      </div>
                  </template>
              </el-table-column>
              <el-table-column min-width="180" prop="complaint" label="投诉原因"></el-table-column>
              <el-table-column min-width="120" label="投诉时间">
                  <template slot-scope="scope">
                      <span>{{ tableFormatDate(scope.row.createTime) }}</span>
                  </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作">
                  <template slot-scope="scope">
                      <div>
                          <el-button v-if="!scope.row.status" @click="operateStatus(scope.row, 2)" type="text" size="small" style="margin-left: 10px;color:red;">退款</el-button>
                          <el-button v-if="!scope.row.status" @click="operateStatus(scope.row, 1)" type="text" size="small">回复</el-button>
                          <p v-if="scope.row.status === 1">已回复</p>
                          <p v-if="scope.row.status === 2">已退款</p>
                      </div>
                  </template>
              </el-table-column>
          </el-table>
      </div>

      <div class="tools">
          <el-pagination
              @size-change="sizeChange"
              @current-change="pageChange"
              :current-page="pageNum"
              :page-sizes="_pageSizes"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
      </div>

      <el-dialog class="dialog-box" title="投诉回复" :visible.sync="dialogVisible" width="400px">
          <div>
              <p v-for="(item, index) in tagList" :key="index" @click="replyContentIndex = index"
                  :class="['tag-p', replyContentIndex === index ? 'tag-p-checked' : '']">
                  {{ item }}
              </p>
              <el-input type="textarea" ref="mytextarea" :rows="3" @focus="replyContentIndex = -1" placeholder="自定义回复内容" v-model="replyContent"></el-input>
          </div>
          <span slot="footer" class="dialog-footer">
              <el-button @click="dialogCancel">取 消</el-button>
              <el-button type="primary" @click="operateTrigger(currentItem, currentOperateType, true)">确 定</el-button>
          </span>
      </el-dialog>
  </div>
</template>

<script>
import { formatDate } from '@/utils/utils'

export default {
  name: 'complaintList',
  data () {
      return {
          replyContent: '',
          replyContentIndex: 0,
          paramsList: {
              listType: 0
          },
          startTagList: [], // 原始回复列表
          tagList: [],
          tableData: [],
          skinList: [],
          pageNum: 1,
          pageSize: this._pageSize,
          total: 0,
          dialogVisible: false,
          loading: false
      }
  },
  mounted () {
    this.getList(1)
  },
  methods: {
      // 获取列表
      async getList (pageNum) {
          if (this.loading) return
          this.pageNum = pageNum
          this.loading = true
          let params = {
              pageNum,
              pageSize: this.pageSize,
              sort: this.sort,
              orderColumn: this.orderColumn
          }
          params = Object.assign(params, this.paramsList)
          let res = await this.$http.post('/team/complaintList', params)
          if (res.code === '0') {
              this.tableData = res.data && res.data.list
              this.startTagList = res.data.replyDefault
              this.total = res.data.totalRow
          } else {
              this.$message({
                  type: 'error',
                  message: '系统异常，请稍后再试'
              })
          }
          this.loading = false
      },

      // 页码切换
      sizeChange (val) {
          this.pageNum = 1
          this.pageSize = val
          this.getList(1)
      },

      // 页容切换
      pageChange (val) {
          this.pageNum = val
          this.getList(this.pageNum)
      },

      operateStatus (item, operateType) {
          if (operateType === 2) {
              this.$confirm(`对大神 ${item.toUserId} 的投诉，确认退款吗？`, '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
              }).then(() => {
                  this.operateTrigger(item, operateType)
              }).catch(() => {
                  this.$message({
                      type: 'info',
                      message: '取消操作'
                  })
              })
          } else {
              this.tagList = this.startTagList.map(tag => {
                  if (item.gameStartTime) {
                      let time = formatDate(item.gameStartTime, 'YYYY-MM-DD HH:MM:SS')
                      return tag.replace('{}', time)
                  } else {
                      return tag.replace('（{}）', '')
                  }
              })
              this.currentItem = item
              this.currentOperateType = operateType
              this.dialogVisible = true
              if (this.replyContentIndex === -1) {
                  this.$nextTick(() => {
                      this.$refs.mytextarea.focus()
                  })
              }
          }
      },
      operateTrigger (item, operateType, isReply) {
          let replyContent = null
          if (isReply) {
              if (this.replyContentIndex === -1) {
                  replyContent = this.replyContent
              } else {
                  replyContent = this.tagList[this.replyContentIndex]
              }
          }
          let params = {
              ids: [item.id],
              operateType,
              replyContent
          }
          this.$http.post('/team/operateComplaint', params).then(res => {
              if (res.code === '0') {
                  item.status = operateType
                  this.$message({
                      type: 'success',
                      message: '操作成功'
                  })
                  this.dialogVisible = false
              } else {
                  this.$message({
                      type: 'error',
                      message: '系统异常，请稍后再试'
                  })
              }
          })
      },
      dialogCancel () {
          this.dialogVisible = false
      },
      sortChange ({ column, prop, order }) {
          this.sort = order || ''
          // 如果没有 sort prop 置为空
          if (!this.sort) {
              this.type = null
          } else {
              if (this.sort === 'ascending') {
                  this.sort = 'asc'
              } else {
                  this.sort = 'desc'
              }
              this.orderColumn = prop
          }
          this.getList(1)
      },
      goUserDetail (id) {
          const { href } = this.$router.resolve({
              path: '/dataReport/userInfo',
              query: {
                  id
              }
          })
          window.open(href, '_blank')
      },
      tableFormatDate (time) {
          return formatDate(time, 'YYYY-MM-DD')
      }
  }
}
</script>

<style lang="scss" scoped>
  .complaint-list {
      .table-box {
          margin: 20px 0;
          .table-btn {
              cursor: pointer;
              color: #409EFF;
              font-size: 13px;
              font-weight: 500;
              &:hover {
                  text-decoration: underline;
              }
          }
          .table-flex {
              display: flex;
              align-items: center;
              .user-avatar {
                  display: inline-block;
                  min-width: 60px;
                  height: 60px;
                  margin-right: 5px;
                  border-radius: 50%;
              }
              .user-info {
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
              }
          }
      }
      .input-box {
          margin-top: 10px;
          font-size: 13px;
          font-weight: 500;
          .input-title {
              margin: 0 10px 0 0px;
          }
          .btn {
              margin-top: 10px;
              margin-left: 10px;
          }
      }
      .tag-p {
          position: relative;
          padding: 20px;
          margin-bottom: 15px;
          cursor: pointer;
          border: 1px solid #ccc;
          border-radius: 10px;
          &:hover {
              box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
          }
      }
      .tag-p-checked {
          border: 1px solid #409EFF;
          &::after {
              content: '✔️';
              position: absolute;
              right: 0;
              bottom: 0;
              width: 30px;
              height: 30px;
          }
      }
      .tools {
          padding-right: 20px;
          display: flex;
          justify-content: flex-end;
      }
  }
</style>
